import 'package:flutter/material.dart';

class ButtonPage extends StatefulWidget {
  const ButtonPage({Key? key}) : super(key: key);

  @override
  _ButtonPageState createState() => _ButtonPageState();
}

class _ButtonPageState extends State<ButtonPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('按钮组件')),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add,color: Colors.black,size: 20,),
        backgroundColor: Colors.yellow,
        onPressed: () {  },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(
            children: [
              Expanded(
                flex: 4,
                child:Container(
                  height: 60,
                  child: ElevatedButton(
                    child: Text("圆形按钮"),
                    style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(Colors.red),
                      foregroundColor: MaterialStateProperty.all(Colors.white),//字体颜色
                      elevation: MaterialStateProperty.all(20),//阴影
                      /*shape: MaterialStateProperty.all(//圆角按钮
                      RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(15),
                      ),
                    ),*/
                      shape: MaterialStateProperty.all(//圆形按钮
                        CircleBorder(
                          side: BorderSide(color: Colors.white),
                        ),
                      ),
                    ),
                    onPressed: () {},
                  ),
                ),
              ),
             /* Expanded(
                child:ElevatedButton.icon(
                  icon: Icon(Icons.search),
                  label: Text('带图标按钮'),
                  onPressed: () {},
                ),
              ),*/
              //按钮大小控制
              Expanded(
                flex: 2,
                child:Container(
                  width: 90,
                  height: 70,
                  margin: EdgeInsets.all(10),
                  child: ElevatedButton(
                    child: Text("normal"),
                    onPressed: () {},
                  ),
                ),
              ),
              /*Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Expanded(
                child: Container(
                  height: 70,
                  margin: EdgeInsets.all(10),
                  child: ElevatedButton(
                    child: Text("自适应按钮1"),
                    onPressed: () {},
                  ),
                ),
              ),
            ],
          ),*/
              /*TextButton(
                child: Text("normal"),
                onPressed: () {},
              ),*/
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              OutlinedButton(
                child: Text("OutlinedButton1"),
                onPressed: () {},
              ),
              OutlinedButton(
                child: Text('OutlinedButton2'),
                style: ButtonStyle(
                  foregroundColor: MaterialStateProperty.all(Colors.black),
                  side: MaterialStateProperty.all(BorderSide(width: 1,color: Colors.red)),
                ),
                onPressed: (){},
              ),
            ],
          ),
          Row(
            children: [
              IconButton(
                icon: Icon(Icons.thumb_up),
                onPressed: () {},
              ),
              ElevatedButton.icon(
                icon: Icon(Icons.send),
                label: Text("发送"),
                onPressed: (){},
              ),
              SizedBox(width: 10),
              OutlinedButton.icon(
                icon: Icon(Icons.add),
                label: Text("添加"),
                onPressed: (){},
              ),
              TextButton.icon(
                icon: Icon(Icons.info),
                label: Text("详情"),
                onPressed: (){},
              ),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ButtonBar(
                children: [
                  ElevatedButton(
                    child: Text('登录'),
                    onPressed: (){},
                  ),
                  ElevatedButton(
                    child: Text('注册'),
                    onPressed: (){},
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}
